<template>
  <div v-for="(good, index) in goods" :key="index" class="recommend-goods">
    <img :src="good.img" />
    {{ good.text }}
    <span>{{ good.price }}</span>
  </div>
</template>
<script>
export default {
  props: {
    goods: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style>
.recommend-goods {
  display: inline-block;
  width: 250px;
  height: 300px;
  margin: 5px;
  background-color: rgb(245, 245, 245);
  border-radius: 20px;
  font-weight: bold;
}
.recommend-goods:hover {
  box-shadow: 0px 0px 15px rgb(172, 133, 133);
}
.recommend-goods img {
  width: 200px;
  margin: 10px;
}
.recommend-goods span {
  display: block;
  margin-top: 15px;
  color: red;
  font-size: 20px;
}
</style>